/*
 * 搜索组件
 */
import { Component } from 'react';
import PropTypes from 'prop-types';
import { Form, Input, Select, Button } from 'antd';
import { get, trim, isNumber } from 'lodash';

import { ORDER_STATUS_MAP, REFUND_STATUS_MAP } from '../constants';

const FormItem = Form.Item;
const { Option } = Select;

class SearchForm extends Component {
  componentDidMount() {
    const { form, filter, parent } = this.props;

    this.handleInitForm(form, parent, filter);
  }

  handleInitForm = (form, parent, filter) => {
    const customerId = get(filter, 'customerId', null);
    const invoice = get(filter, 'invoice', null);
    let status = get(filter, 'status', null);

    if (status !== null) {
      status = Number(status);
    }

    form.setFieldsValue({
      customerId,
      invoice,
      status,
    });
  };

  handleFormReset = () => {
    this.props.form.resetFields();
  };

  handleFormSearch = e => {
    e.preventDefault();

    const { form, onSearch } = this.props;

    form.validateFields((err, fieldsValue) => {
      if (err) return;

      let params = {};
      Object.keys(fieldsValue).forEach(key => {
        const val = fieldsValue[key];
        if (val || val === 0) {
          const newVal = trim(val);
          params[key] = isNumber(val) ? Number(newVal) : newVal;
        }
      });

      onSearch(params, true);
    });
  };

  render() {
    const { form, parent } = this.props;
    const { getFieldDecorator } = form;
    const statusMap = parent === 'list' ? ORDER_STATUS_MAP : REFUND_STATUS_MAP;

    return (
      <Form onSubmit={this.handleFormSearch.bind(this)} layout="inline">
        <FormItem label="客户ID">
          {getFieldDecorator('customerId')(
            <Input style={{ width: 140 }} placeholder="请输入客户ID" autoComplete="off" />
          )}
        </FormItem>
        <FormItem label="订单号">
          {getFieldDecorator('invoice')(
            <Input style={{ width: 240 }} placeholder="请输入订单号" autoComplete="off" />
          )}
        </FormItem>
        <FormItem label="状态">
          {getFieldDecorator('status')(
            <Select
              placeholder="请选择"
              style={{ width: 200 }}
              optionFilterProp="children"
              filterOption={(input, option) => {
                return option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
              }}>
              {statusMap.map(item => (
                <Option key={item.status} value={item.status}>
                  {item.desc}
                </Option>
              ))}
            </Select>
          )}
        </FormItem>
        <FormItem>
          <div style={{ overflow: 'hidden' }}>
            <span style={{ marginBottom: 24 }}>
              <Button icon="search" type="primary" htmlType="submit">
                查询
              </Button>
              <Button icon="reset" style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
                重置
              </Button>
            </span>
          </div>
        </FormItem>
      </Form>
    );
  }
}

if (process.env.UMI_ENV !== 'prod') {
  SearchForm.propTypes = {
    onSearch: PropTypes.func.isRequired,
    form: PropTypes.object.isRequired,
    filter: PropTypes.object,
    parent: PropTypes.string,
  };
}

SearchForm.defaultProps = {
  onSearch: () => {},
  form: {},
  filter: null,
  parent: 'list',
};
export default Form.create()(SearchForm);
